<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    .get>input {
        width: 85%;
        height: 30px;
        border-radius: 10px;
        margin-right: 10px;
        margin-bottom: 10px;
    }

    .list {
        width: 50%;

    }

    .let {
        display: flex;
        flex-wrap: wrap;
    }

    .right {
        display: flex;
    }

    .one,
    .tew,
    .three {
        width: 100px;
        height: 30px;
        background-color: rgb(115, 226, 226);
        margin-left: 20px;
        text-align: center;
        line-height: 30px;
        border-radius: 30px;
    }

    .em {
        text-align: center;
        font-size: 20px;
        color: red;
        line-height: 100px;
    }

    .let .left {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-around;
        background-color: rgb(244, 65, 65);
        line-height: 50px;
        margin-bottom: 15px;
        border-radius: 50px;
    }

    .let .left.ative {
/* 
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-around; */
        background-color: rgb(114, 212, 244);
        /* line-height: 50px;
        margin-bottom: 15px;
        border-radius: 50px; */

    }
</style>

<body>
    <div id="arr">
        <div class="box">
            <div class="get">
                <input type="text" placeholder="输入任务名称" v-model="inputText">
                <span @click="add">添加</span>
            </div>
            <div class="right">
                <div class="one">全部任务({{tasklist.length}})</div>
                <div class="tew">已完成({{yi.length}})</div>
                <div class="three" style="background-color: red;">未完成({{wei.length}})</div>
            </div>
            <p style="font-size: 20px;margin-top: 10px;margin-bottom: 10px;">任务列表</p>
            <div class="let ">
                <div :class=" `left ${item.status?'ative':''}`" v-for="(item,index) in tasklist" :key="index ">
                    <input type="checkbox" @click="put(item)">
                    <span>{{item.id}}</span>
                    <div class="list">{{item.name}}</div>
                    <span @click="delte(index)">删除</span>
                </div>

            </div>
            <div class="em" v-show="tasklist.length == 0">任务列表为空，请添加一个任务!</div>
        </div>


    </div>
</body>

</html>
<script src="./vue-2.5.21.js"></script>
<script>
    var V = new Vue({
        el: '#arr',
        data: {
            inputText: '',
            tasklist: []

        },
        methods: {
            add() {
                if (this.inputText) {
                    var obj = { id: this.tasklist.length + 1, name: this.inputText, status: false}
                    this.tasklist.push(obj)
                    this.inputText = ''
                    console.log(this.tasklist);
                    
                }
            },
            put(item) {
                item.status = !item.status
                console.log(this.tasklist);
            },
            delte(index){
                 this.tasklist.splice(index,1)
                 console.log(this.tasklist);
                 
                 
            }
         
        },
        computed:{
            wei(){
                  return this.tasklist.filter((item)=>{
                    return item.status ==false
                })
                
            },
            yi(){
                return  this.tasklist.filter((item)=>{
                    return item.status ==true
                })
            }
        }
    })
</script>